<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>U Control Chart (Defects per Unit)</title>
    <script src="./plotly-latest.min.js"></script>
</head>
<body>
    <div id='target' ></div>
        <script>
        var target_target = document.getElementById('target');
        var layout = {
    title: 'U Control Chart (Defects per Unit)',
    height: 600,
    width: 1000,
    xaxis: {
    title: 'Sample Number',
    },

    yaxis: {
    title: 'Defects per Unit (U)',
    },

};

var trace0 =
{
x: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],
y: ["1.1","0.9","0.8","0.8","0.7","1.0","1.6","0.7","1.1","1.3","1.5","1.1","0.8","0.8","0.7","1.5","0.8","1.1","0.8","1.1"],
mode: 'lines+markers',
xaxis: 'x',
yaxis: 'y',
type: 'scatter',
name: 'U Value',
};
var trace1 =
{
x: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],
y: ["1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428","1.9634149149242428"],
mode: 'lines',
line: {
  "color" : "red",
  "dash" : "dash",
  "shape" : "linear",
  "simplify" : true,
  "smoothing" : 1.0,
  "width" : 1.5
},
xaxis: 'x',
yaxis: 'y',
type: 'scatter',
name: 'UCL',
};
var trace2 =
{
x: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],
y: ["1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01","1.01"],
mode: 'lines',
line: {
  "color" : "green",
  "dash" : "dot",
  "shape" : "linear",
  "simplify" : true,
  "smoothing" : 1.0,
  "width" : 1.5
},
xaxis: 'x',
yaxis: 'y',
type: 'scatter',
name: 'CL',
};
var trace3 =
{
x: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],
y: ["0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777","0.05658508507575777"],
mode: 'lines',
line: {
  "color" : "red",
  "dash" : "dash",
  "shape" : "linear",
  "simplify" : true,
  "smoothing" : 1.0,
  "width" : 1.5
},
xaxis: 'x',
yaxis: 'y',
type: 'scatter',
name: 'LCL',
};

        var data = [ trace0, trace1, trace2, trace3];
Plotly.newPlot(target_target, data, layout);            </script>

</body>
</html>